<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			.section1>p:nth-child(even) {
				background-color: #f00;
			}
			
			.section2>p:nth-child(odd) {
				background-color: #0f0;
			}
			
			.section3>p:nth-child(2n-1) {
				background-color: #0f0;
			}
			
			.section3>p:nth-child(2n) {
				background-color: #f00;
			}
			
			.section4>p:nth-child(n+3) {
				background-color: #00f;
			}
		</style>
	</head>
	<body>
		<h1>:nth-child</h1>
		<ul>
			<li>nth-child表示第几个子元素</li>
			<li>用法：E:nth-child(n)</li>
			<li>选择偶数：E:nth-child(even)</li>
			<li>选择奇数：E:nth-child(odd)</li>
			<li>其中n从0开始</li>
		</ul>
		<h2>选择偶数 even</h2>
		<section class="section1">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</section>
		<h2>选择奇数 odd</h2>
		<section class="section2">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</section>
		<h2>选择奇数 2n-1；选择偶数2n</h2>
		<section class="section3">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</section>
		<h3>从第三个p标签开始，背景色为蓝色</h3>
		<section class="section4">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
		</section>
	</body>
</html>
